<template>
    <section class="order-list-box">
      <ul>
        <li
          @click="sendOrderId(item)"
          class="bgcFFF fs14"
          v-for="(item,index) in orderData"
        >
          <p class="order-num">
            订单号：{{item.orderNum}}
            <span class="order-status flr" :class="item.status == 4 ? 'colorC5C5CC' : ''">
              {{item.status | status}}
            </span>
          </p>

          <OrderGood
            :afterSale="afterSale"
            :unpaid="unpaid"
            :goodList="item.goodList"
            bgc="#F7F8FA"
            @refund="opreationRefund"
            @after-sale="opreationAfterSale"></OrderGood>

          <p class="order-subtotal text-r">
            <span class="fll order-pop">退款成功</span>
            共{{item.totalGoodNum}}件商品 小计：<span class="fs12">￥<i>{{item.totalPrice}}</i>.00</span></p>
          <p class="btn line-top text-r" v-if="item.status == 1">
            <span class="inline-block text-c" @click.stop="handleOperation(1,item.id)">取消订单</span>
            <span class="inline-block text-c" @click.stop="handleOperation(2,item.id)">去付款</span>
          </p>
          <p class="btn line-top text-r" v-if="item.status == 3">
            <span class="inline-block text-c" @click.stop="handleOperation(3,item.id)">查看物流</span>
            <span class="inline-block text-c" @click.stop="handleOperation(4,item.id)">确认收货</span>
          </p>
          <p class="btn line-top text-r" v-if="item.status == 4">
            <span class="inline-block text-c" @click.stop="handleOperation(5,item.id)">删除订单</span>
          </p>
          <p class="btn line-top text-r" v-if="item.status == 5">
            <span class="inline-block text-c" @click.stop="handleOperation(3,item.id)">查看物流</span>
          </p>
        </li>
      </ul>

    </section>
</template>

<script type="text/ecmascript-6">
  import OrderGood from './OrderGood'
  export default {
    components:{
      OrderGood
    },
    data() {
      return {

      }
    },
    created(){
      console.log('order ',this.afterSale);
    },
    props:['orderData','afterSale','unpaid'],
    filters:{
      status:function(value){
        let text = '';
        switch (value){
          case 1:
            text = '待付款';
            break;
          case 2:
            text = '待发货';
            break;
          case 3:
            text = '卖家已发货';
            break;
          case 4:
            text = '交易关闭';
            break;
          case 5:
            text = '交易成功';
            break;
        }

      },
    },
    methods: {
      sendOrderId(item){
        this.$emit('send-order-id',{id:item.id,afterSale:this.afterSale,unpaid:this.unpaid})
      },
      //订单操作
      handleOperation(type,id){
        this.$emit('operation-order',{type:type,id:id})
      },
      //退款
      opreationRefund(id){
        this.$emit('opreation-refund',{id:id})
      },
      //售后
      opreationAfterSale(id){
        this.$emit('opreation-after-sale',{id:id})
      },
    },
  }
</script>

<style scoped lang="scss">
  @import '../assets/css/base';

  .order-list-box{
    width: 100%;
    height: auto;

    ul{
      width: 100%;
      height:auto;

      li{
        width: 100%;
        height: auto;
        margin-bottom: 10px;

        .order-num,
        .order-subtotal,
        .btn{
          padding:0 15px;
          box-sizing: border-box;
        }

        .order-num{
          height: 40px;
          line-height: 40px;

          .order-status{
            color: #B989F4;
          }
        }

        .order-subtotal{
          width: 100%;
          height: 44px;
          line-height: 44px;

          .order-pop{
            color: #FFC369;
          }

          span{
            color: #F54E4E;

            i{
              font-style: normal;
              font-size: 16px;
            }
          }
        }

        .btn{
          width: 100%;
          height: 44px;
          line-height: 44px;

          span{
            width: 80px;
            height: 28px;
            line-height: 28px;
            border-radius: 16px;
            border: 1px solid #999AA3;
          }

          span:first-child{
            margin-right: 6px;
          }
        }
      }
    }
  }

</style>
